<template>
  <div class="root">
    <el-tabs @tab-add="add" v-model="activeName" type="card" class="demo-tabs" closable addable>
      <template v-for="item in tabsOptions" :key="item.code">
        <el-tab-pane :label="item.name" :name="item.code">
          <DictList :pid="item.id"/>
        </el-tab-pane>
      </template>
    </el-tabs>

    <!--引入组件-->
    <AddGroup ref="saveUpdate" :visible="isShow" @close="isShow=false" @refreshDate="queryGroup"></AddGroup>
  </div>
</template>

<script setup>
import { ref ,onBeforeMount} from "vue";
import { queryDictChild } from "@/api/dict.js";
//引入组件
import AddGroup from "./AddGroup.vue";
//引入字典列表组件
import DictList from "./DictList.vue";

//默认选中的
const activeName = ref("");
const tabsOptions = ref([]);
const saveUpdate = ref();


//是否显示新增
const isShow = ref(false);

// 新增标签页
function add() {
  isShow.value = true;
  saveUpdate.value.init();     
}
//查询分组数据
async function queryGroup() {
  let res = await queryDictChild(0);
  if (res.code == 200) {
    tabsOptions.value = res.data;
    //列表中，第一项做为默认选中
    if (tabsOptions.value.length > 0) {
      let tmp = tabsOptions.value[0];
      activeName.value = tmp.code;
    }
  }
}

onBeforeMount(() => {
  queryGroup();
});
</script>

<style scoped>
.root{
  height: 100%;
  background-color: #fff;
}
</style>

